<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>cssinspirationguide - csc inspiration guide online</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="csc inspiration guide online">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
    <link rel="stylesheet" href="//unpkg.com/vuep/dist/vuep.css">
    <link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">
    <link rel="stylesheet" href="./assets/css/index.css">
    <link rel="icon" type="image/x-icon" href="./logo2.png">
    <script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1280199803&web_id=1280199803"></script>
    <!-- <link rel="stylesheet" href="./assets/css/prism-line-numbers.css"> -->
    <style rel="stylesheet">
    body > a:nth-child(1) {
        opacity: 0;
        position: fixed;
        bottom: -100px;
        left: -100px;
        right: unset;
        top: unset;
    }
    /* - Loading - */
    div#app {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        z-index: 0;
        width: 84px;
        height: 84px;
        border-radius: 10px;
        overflow: hidden;
        animation: change 2.4s infinite linear;
    }
    div#app::before {
        content: '';
        position: absolute;
        z-index: -2;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-color: #399953;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
        animation: rotate 2.4s linear infinite, change 2.4s linear infinite;
    }     
    div#app::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: 4px;
        top: 4px;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        background: white;
        border-radius: 5px;
        animation: change 2.4s infinite linear;
    }
    @keyframes rotate {
        100% {
            transform: rotate(1turn);
        }
    }
    @keyframes change {
        0%, 25% {
            border-radius: 0;
        }
        35%, 75% {
            border-radius: 50%;
        }
        85%, 100% {
            border-radius: 0;
        }
    } 
    </style>
</head>

<body>
    <div id="app"></div>
    <script src="//unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
    <script src="./assets/js/md5.js"></script>
    <script src="./assets/js/index.js"></script>
    <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
    <script src="./assets/js/search.min.js"></script>
    <script src="./assets/js/gittalk.min.js"></script>
    <script src="//unpkg.com/vue/dist/vue.min.js"></script>
    <script src="//unpkg.com/vuep/dist/vuep.min.js"></script>
    <script src="//unpkg.com/prismjs@1.15.0/components/prism-scss.min.js"></script>
    <script src="//unpkg.com/prismjs@1.15.0/components/prism-pug.min.js"></script>
</body>

</html>